<template>
  <div>
    <SunSearch :search="searchList" />

    <el-card class="sun-el-card">
      <sunUpdataAdd addTitle="采集分析" title="推广视频" />
      <el-table v-loading="listLoading" :data="tableData" border style="width: 100%">

        <el-table-column label="推广视频标题" fixed="left" width="230" prop="title" />
        <el-table-column label="视频地址"  width="230" prop="url" />
        <el-table-column label="作者头像" prop="avatar" />
        <el-table-column label="作者昵称" prop="nickname" />
        <el-table-column label="作者粉丝量" align="center" width="100px" prop="fans_count" />
        <el-table-column label="评论数量" align="center">
          <template slot-scope="scope">
            <a><span style="color:#409EFF;" @click="getCommentCount(scope.row)">{{ scope.row.comments_count }}</span></a>
          </template>
        </el-table-column>

        <el-table-column label="积极评论数量" align="center" width="110px" prop="positive_comments">
          <template slot-scope="scope">
            <a><span style="color:#3581E5;" @click="getCommentCount(scope.row,'positive')">{{ scope.row.positive_comments }}</span></a>
          </template>
        </el-table-column>
        <el-table-column label="消极评论数量" align="center" width="110px" prop="passive_comments">
          <template slot-scope="scope">
            <a><span style="color:#F25B6A;" @click="getCommentCount(scope.row,'passive')">{{ scope.row.passive_comments }}</span></a>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" width="160px" prop="created_at" />
        <el-table-column label="更新时间" align="center" width="160px" prop="updated_at" />
        <el-table-column label="操作" fixed="right" width="180" align="center" >
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button type="primary" size="mini" @click="handleStatistic(scope.row)">数据可视化</el-button>
          </template>

        </el-table-column>
      </el-table>
      <pagination v-show="laypage.total > 0" :total="laypage.total" :page.sync="laypage.number" :limit.sync="laypage.size" @pagination="requestData" />
    </el-card>

    <el-drawer
      class="sun-el-drawer"
      :with-header="false"
      :destroy-on-close="true"
      :wrapper-closable="false"
      :visible.sync="show_comments"
      direction="rtl"
    >
      <comments :feeling="feeling" />
    </el-drawer>

    <el-drawer
      class="sun-el-drawer"
      :with-header="false"
      :destroy-on-close="true"
      :wrapper-closable="false"
      :visible.sync="show_statistics"
      direction="rtl"
    >
      <statistics />
    </el-drawer>

  </div>
</template>

<script>
import { post, get } from '@/api/request'
import { $remove, $tooltips } from '@/sun-components/SunMsg.js'
import SunSearch from '@/sun-components/SunSearch'
import SunUpdataAdd from '@/sun-components/SunUpdataAdd'
import comments from './components/comments'
import statistics from './components/statistics'
import Pagination from '@/sun-components/Pagination'
export default {
  name: 'Analyse',
  components: { SunSearch, Pagination, SunUpdataAdd, comments, statistics },
  inject: ['reload'],
  data() {
    return {
      searchList: [
        { 'title': '标题', type: 'input', show: 'title', value: '' },
        { 'nickname': '作者昵称', type: 'input', show: 'nickname', value: '' }
      ],
      formData: {},
      tableData: [],
      laypage: {
        number: 1,
        size: 10,
        total: 0
      },
      searchFilter: {},
      listLoading: false,
      show_comments: false,
      show_statistics: false,
      currentItem: {},
      feeling: ''
    }
  },
  created() {
    this.requestData()
  },
  methods: {
    addData() {
      this.listLoading = true
      post('videos').then(response => {
        if (response.code === 0) {
          $tooltips('采集成功!', 'success')
          this.requestData()
        }
        this.listLoading = false
      })
    },
    getCommentCount(row, feeling = '') {
      this.show_comments = true
      this.currentItem = row
      this.feeling = feeling
    },
    handleStatistic(row) {
      this.show_statistics = true
      this.currentItem = row
    },
    async searchResult(filter) {
      this.searchFilter = filter
      this.requestData()
    },
    upData() {
      this.requestData()
    },
    async requestData() {
      this.listLoading = true
      await get(`videos`, Object.assign(this.searchFilter, { 'page[size]': this.laypage.size, 'page[number]': this.laypage.number })).then(response => {
        if (response.code === 0) {
          // console.log(response.data)
          this.tableData = response.data
          this.laypage.total = response.meta.total
        }
        this.listLoading = false
      })
    },

    async handleDelete(index, row) {
      $remove(`videos/${row.id}`, this)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/sun-style.scss';

.el-form--label-left .el-form-item__label {
  text-align: right;
}
</style>
